html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-image: url(../img/bg_img.png);
	background-repeat: repeat;
}
.general_anime {
	width: 800px;
	height: 400px;
	margin: 10% auto;
	position: relative;
}
.general_anime .box_tip {
	position: absolute;
	top: 45px;
	left: 353px;
	z-index: 199;
	opacity: .8;
}
.general_anime .box_tip h1 {
	color: #FFFFFF;
	font-size: 80px;
}
.general_anime .content_textbox {
	width: 180px;
	height: 50px;
	background-color: #154F6B;
	position: absolute;
	z-index: 99;
	opacity: .95;
}
.content_textbox h4,
.content_textbox p {
	margin: 0;
	padding: 4px 5px;
	color: #FFFFFF;
	font-size: 16px;
}
.content_textbox p {
	padding: 0px 5px;
	font-size: 9px;
}
.content_textbox .textbox_left,
.content_textbox .textbox_right {
	float: left;
}
.content_textbox .textbox_left {
	width: 70%;
}
.content_textbox .textbox_right>div {
	border: 1px solid #FFFFFF;
	border-radius: 50%;
	color: #FFFFFF;
	padding: 7px;
	margin: 5px;
	margin-left: 7px;
}
.content_textbox.textbox1 {
	top: 330px;
	left: 370px;
	animation: bounce1 10s linear infinite;
}
@keyframes bounce1{
	0% {
		top: 330px;
		left: 370px;
	}
	10% {
		top: 330px;
		left: 370px;
	}
	20% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	30% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	40% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	50% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	60% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	70% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	80% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	90% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	100% {
		top: 330px;
		left: 370px;
	}
}
.content_textbox.textbox2 {
	top: 200px;
	left: 20px;
	opacity: .8;
	transform: scale(.9);
	animation: bounce2 10s linear infinite;
}
@keyframes bounce2{
	0% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	10% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	20% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	30% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	40% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	50% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	60% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	70% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	80% {
		top: 330px;
		left: 370px;
	}
	90% {
		top: 330px;
		left: 370px;
	}
	100% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
}
.content_textbox.textbox3 {
	top: 110px;
	left: 140px;
	opacity: .6;
	transform: scale(.6);
	animation: bounce3 10s linear infinite;
}
@keyframes bounce3{
	0% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	10% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	20% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	30% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	40% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	50% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	60% {
		top: 330px;
		left: 370px;
	}
	70% {
		top: 330px;
		left: 370px;
	}
	80% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	90% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	100% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
}
.content_textbox.textbox4 {
	top: 110px;
	left: 490px;
	opacity: .6;
	transform: scale(.6);
	animation: bounce4 10s linear infinite;
}
@keyframes bounce4{
	0% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	10% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	20% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	30% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	40% {
		top: 330px;
		left: 370px;
	}
	50% {
		top: 330px;
		left: 370px;
	}
	60% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	70% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	80% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	90% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	100% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
}
.content_textbox.textbox5 {
	top: 200px;
	left: 600px;
	opacity: .8;
	transform: scale(.8);
	animation: bounce5 10s linear infinite;
}
@keyframes bounce5{
	0% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	10% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
	20% {
		top: 330px;
		left: 370px;
	}
	30% {
		top: 330px;
		left: 370px;
	}
	40% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	50% {
		top: 200px;
		left: 20px;
		opacity: .8;
		transform: scale(.9);
	}
	60% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	70% {
		top: 110px;
		left: 140px;
		opacity: .6;
		transform: scale(.6);
	}
	80% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	90% {
		top: 110px;
		left: 490px;
		opacity: .6;
		transform: scale(.6);
	}
	100% {
		top: 200px;
		left: 600px;
		opacity: .8;
		transform: scale(.8);
	}
}
.general_anime .container {
	width: 500px;
	height: 500px;
	position: relative;
	left: 25%;
	transform: rotateX(120deg);
}
.general_anime .scaleplate {
	width: 400px;
	height: 400px;
	border: 5px dotted #FFFFFF;
	border-radius: 50%;
	border-right-color: #FFFFFF;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: #FFFFFF;
	position: absolute;
	animation: arc1 4s linear infinite;
}
@keyframes arc1{
	from{
		transform: rotateZ(0deg);
	}
	to{
		transform: rotateZ(360deg);
	}
}
.general_anime .corona, .general_anime .corona_ext {
	width: 360px;
	height: 360px;
	border: 10px solid #00FFFF;
	border-radius: 50%;
	position: absolute;
	left: 15px;
	top: 40px;
	box-shadow: 0 0 10px 3px #00FFFF inset;
}
.general_anime .corona_ext {
	box-shadow: 0 0 20px 1px #00FFFF;
}
.general_anime .gear, .general_anime .gear_arc {
	width: 280px;
	height: 280px;
	border: 20px solid #154F6B;
	margin: 20px;
	border-radius: 50%;
	position: absolute;
	margin-top: 45px;
	opacity: .9;
}
.general_anime .gear_arc {
	border-style: solid;
	border-width: 20px;
	border-right-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: #00FFFF;
	border-radius: 50%;
	opacity: .6;
	animation: arc 2s linear infinite;
}
@keyframes arc{
	from{
		transform: rotateZ(0deg);
	}
	to{
		transform: rotateZ(-360deg);
	}
}
.general_anime .filament {
	width: 240px;
	height: 240px;
	border: 2px solid #2b6178;
	border-radius: 50%;
	margin: 30px;
	margin-top: 65px;
	margin-left: 18px;
}
.general_anime .semicircle {
	margin: 30px;
	width: 180px;
	height: 180px;
	border-style: solid;
	border-width: 2px;
	border-right-color: #FFFFFF;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: #FFFFFF;
	border-radius: 50%;
	position: absolute;
	margin-top: 40px;
	animation: contact 6s linear infinite;
}
@keyframes contact{
	0% {
		transform: rotateZ(0deg);
	}
	25% {
		transform: rotateZ(90deg);
	}
	50% {
		transform: rotateZ(0deg);
	}
	75% {
		transform: rotateZ(-90deg);
	}
	100% {
		transform: rotateZ(0deg);
	}
}
.general_anime .circle {
	margin: 40px;
	width: 150px;
	height: 150px;
	border: 1px solid #e8e8e8;
	border-radius: 50%;
	margin-top: 65px;
	position: absolute;
}
.general_anime .dotted_circle {
	margin: 10px;
	width: 130px;
	height: 130px;
	border: 2px dotted #00FFFF;
	border-radius: 50%;
	margin-top: 15px;
}
.general_anime .triangle_con {
	margin: 5px;
	width: 90px;
	height: 90px;
}
.general_anime .triangle_top,
.general_anime .triangle_left,
.general_anime .triangle_bottom,
.general_anime .triangle_right {
	width:0;
	height:0;
	border-right:10px solid transparent;
	border-left:10px solid transparent;
	border-bottom:10px solid #00FFFF;
	position: absolute;
	bottom: 0;
	right: 40%;
	opacity: .6;
}
.general_anime .triangle_top {
	border-bottom:7px solid #00FFFF;
	animation: shrink1 2s linear infinite;
}
.general_anime .triangle_left {
	left: 10px;
	bottom: 35%;
	transform: rotate(90deg);
	animation: shrink2 2s linear infinite;
}
.general_anime .triangle_bottom {
	top: 30px;
	left: 40%;
	border-bottom:12px solid #00FFFF;
	transform: rotate(180deg);
	animation: shrink3 2s linear infinite;
}
.general_anime .triangle_right {
	bottom: 35%;
	right: 6px;
	transform: rotate(-90deg);
	animation: shrink4 2s linear infinite;
}
@keyframes shrink1{
	0% {
		transform: translateY(-10px);
	}
	50% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-10px);
	}
}
@keyframes shrink2{
	0% {
		transform: rotate(90deg) translateY(-10px);
	}
	50% {
		transform: rotate(90deg) translateY(0px);
	}
	100% {
		transform: rotate(90deg) translateY(-10px);
	}
}
@keyframes shrink3{
	0% {
		transform: rotate(180deg) translateY(-10px);
	}
	50% {
		transform: rotate(180deg) translateY(0px);
	}
	100% {
		transform: rotate(180deg) translateY(-10px);
	}
}
@keyframes shrink4{
	0% {
		transform: rotate(-90deg) translateY(-10px);
	}
	50% {
		transform: rotate(-90deg) translateY(0px);
	}
	100% {
		transform: rotate(-90deg) translateY(-10px);
	}
}